<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <span style="color: red; margin-right: 5px" v-if="required">*</span>
      <div>{{ name }}</div>
      <el-button type="text" size="medium" v-if="allowNew" :icon="company.isNew ? 'el-icon-minus' : 'el-icon-plus'"
        @click="company.isNew = !company.isNew" :disabled="disabled" class="right-buttons">
        {{ company.isNew ? '可选' : '新增' }}
      </el-button>
    </div>
    <el-form class="sub-form" :label-width="labelWidth" :disabled="disabled" label-position="left">
      <el-form-item :label="name" v-if="!company.isNew">
        <div style="display: flex">
          <el-select style="flex: 1" v-model="company.id" filterable remote reserve-keyword
            placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading"
            :disabled="company.isNew" @input="chooseCompany">
            <template slot="empty">
              <el-link type="primary" v-if="allowNew" @click="company.isNew = !company.isNew" style="padding: 5px 40px"
                :disabled="disabled">
                找不到匹配数据，请点击新增
              </el-link>
              <div v-else style="padding: 5px 40px">找不到匹配数据</div>
            </template>
            <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="公司全称" v-if="company.isNew">
        <div style="display: flex">
          <el-input style="flex: 1" v-model="company.name" :placeholder="'请输入' + name + '全称'"
            @input="addCompany"></el-input>
          <el-button size="small" v-if="allowNew" :icon="company.isNew ? 'el-icon-minus' : 'el-icon-plus'"
            @click="company.isNew = !company.isNew"></el-button>
        </div>
      </el-form-item>
      <el-form-item label="公司简称" v-if="company.isNew">
        <el-input style="width: 100%" v-model="company.shortName" placeholder="请输入公司简称" @input="addCompany"></el-input>
      </el-form-item>
      <el-form-item label="税号" v-if="company.isNew">
        <el-input style="width: 100%" v-if="company.isNew" v-model="company.taxNo" placeholder="请输入税号"
          @input="addCompany"></el-input>
      </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import {
  getCompanies,
  getCompany,
} from '@/api/flowCenter/field/companySelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      company: {
        id: null,
        name: '',
        shortName: '',
        taxNo: '',
        isNew: false,
        displayName: '',
      },
      companies: [],
      loading: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '公司'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '公司'
        }
      }
      return '公司'
    },
    allowNew() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'allowNew')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
  },
  methods: {
    getCompanies(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCompanies({
          keyword,
        }).then(({ data }) => {
          this.companies = data.Items
          this.loading = false
        })
      }
    },
    addCompany() {
      this.company.id = null
      this.input()
    },
    chooseCompany(val) {
      let cmp = this.companies.find((x) => x.CMP_ID == val)
      this.company.id = cmp.CMP_ID
      this.company.name = cmp.CMP_Name
      this.company.taxNo = cmp.CMP_TaxNo
      this.company.shortName = cmp.CMP_ShortName
      this.input()
    },
    input() {
      this.company.displayName = this.company.name
      this.$emit('input', JSON.stringify(this.company))
      this.$emit('display', this.company.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.company = JSON.parse(this.value)
      if (this.company.id) {
        getCompany(this.company.id).then(({ data }) => {
          this.companies = [data]
        })
      }
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>